<?xml version="1.0" encoding="UTF-8"?>
<!--
    Document   : AdministracionTorneo
    Created on : 31-may-2011, 15:00:34
    Author     : OpenCodes
    ATENCION!! CAMBIE EL ENCODING DE ESTA PAGINA A UTF-8. antes estaba en windows-1252
    esto es para que me tome la letra ñ
-->
<jsp:root version="1.2" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:ui="http://www.sun.com/web/ui">
    <jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/>
    <f:view>
        <ui:page id="page">
            <ui:html id="html">
                <ui:head id="head" title="Administracion Torneos">
                    <ui:link id="link1" url="/resources/stylesheet.css"/>
                    <ui:script id="jQuery" type="text/javascript" url="/resources/javascript/jquery-1.5.2.js"/>
                    <!-- JQuery Alerts -->
                    <ui:link id="cssUIAlert" media="screen" rel="stylesheet" type="text/css" url="/resources/javascript/jqueryUI/jquery.alerts.css"/>
                    <ui:script id="jsUIAlert" type="text/javascript" url="/resources/javascript/jqueryUI/jquery.alerts.js"/>
                </ui:head>
                <style media="screen" type="text/css">
                        .highlight {
                            /*background-color: #D3E0EB;*/
                            background-color: #66ccff;

                        }
                    </style>
                <ui:body binding="#{AdministracionTorneo.body}" focus="form:tabSetTorneos:tabConsultar:tfBuscarNombre" id="body">
                    <ui:form id="form">
                        <table width="712">
                            <thead>
                                <tr>
                                    <td align="center" bgcolor="white" colspan="2" style="height: 12px" valign="middle"></td>
                                </tr>
                                <tr>
                                    <td align="center" colspan="2" style="background-color:rgb(65, 125, 185);height: 24px" valign="middle">
                                        <ui:label id="lblTitulo" style="color:white; font-family: Arial,Helvetica,sans-serif; font-size: 14px;" text="Administración Torneos"/>
                                    </td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr align="center">
                                    <td align="center">
                                        <div align="center" id="s">
                                            <ui:alert binding="#{AdministracionTorneo.alerta}" id="alerta" style="" type="warning"/>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td id="torneo">
                                        <ui:tabSet binding="#{AdministracionTorneo.tabSetTorneos}" id="tabSetTorneos" selected="tabConsultar" style="height: 263px">
                                            <ui:tab action="#{AdministracionTorneo.tabConsultar_action}" id="tabConsultar" text="Consultar" toolTip="Consultar Torneos">
                                                <ui:panelLayout id="layoutPanel1" style="background-color: rgb(153, 204, 255); height: 100%; position: relative; width: 704px; -rave-layout: grid">
                                                    <h:dataTable bgcolor="white" binding="#{AdministracionTorneo.tablaTorneos}" border="1" cellpadding="0"
                                                        cellspacing="0" footerClass="pieTabla" headerClass="encabezadoTabla" id="tablaTorneos"
                                                        rowClasses="filaTabla" rows="5" rules="all"
                                                        style="left: 16px; top: 64px; position: absolute; text-align:center"
                                                        value="#{AdministracionTorneo.listaTorneos}" var="torneo" width="500">
                                                        <f:facet name="header">
                                                            <h:outputText style="font-size: 12px;" value="Tabla Torneos (Total: #{AdministracionTorneo.tablaTorneos.rowCount})"/>
                                                        </f:facet>
                                                        <h:column id="colSelecionar">
                                                            <f:facet name="header">
                                                                <h:outputText style="font-size: 12px;" value="Sel"/>
                                                            </f:facet>
                                                            <h:selectBooleanCheckbox id="chkSeleccionar" value="#{AdministracionTorneo.idsSeleccionados[torneo.id]}"/>
                                                        </h:column>
                                                        <h:column>
                                                            <f:facet name="header">
                                                                <h:outputText style="font-size: 12px;" value="Nº"/>
                                                            </f:facet>
                                                            <h:outputText value="#{AdministracionTorneo.tablaTorneos.rowIndex + 1}"/>
                                                        </h:column>
                                                        <h:column>
                                                            <f:facet name="header">
                                                                <h:outputText style="font-size: 12px;" value="Id"/>
                                                            </f:facet>
                                                            <h:outputText id="idTorneo" style="font-size: 12px;" value="#{torneo.id}"/>
                                                        </h:column>
                                                        <h:column id="colNombre">
                                                            <h:commandLink action="#{AdministracionTorneo.seleccionarFilaTorneo}" id="commandNombre"
                                                                style="color:black" title="Nombre: #{torneo.nombre}" value="#{torneo.nombre}"/>
                                                            <f:facet name="header">
                                                                <h:commandLink action="#{AdministracionTorneo.ordenarListaPorNombre}" id="nombre"
                                                                    style="color:black" title="Nombre" value="Nombre"/>
                                                            </f:facet>
                                                        </h:column>
                                                        <h:column id="colAño">
                                                            <h:commandLink action="#{AdministracionTorneo.seleccionarFilaTorneo}" id="commandAño"
                                                                style="color:black;text-align: center" title="Año: #{torneo.año}" value="#{torneo.año}"/>
                                                            <f:facet name="header">
                                                                <h:commandLink action="#{AdministracionTorneo.ordenarListaPorNombre}" id="año"
                                                                    style="color:black" title="Año" value="Año"/>
                                                            </f:facet>
                                                        </h:column>
                                                        <h:column id="colCatMin">
                                                            <h:commandLink action="#{AdministracionTorneo.seleccionarFilaTorneo}" id="commandCatMin"
                                                                style="color:black;text-align: center" title="Categoria Minima: #{torneo.categoriaMinima}" value="#{torneo.categoriaMinima}"/>
                                                            <f:facet name="header">
                                                                <h:commandLink action="#{AdministracionTorneo.ordenarListaPorNombre}" id="categoriaMin"
                                                                    style="color:black" title="Categoria Minima" value="Cat. Min."/>
                                                            </f:facet>
                                                        </h:column>
                                                        <h:column id="colCatMax">
                                                            <h:commandLink action="#{AdministracionTorneo.seleccionarFilaTorneo}" id="commandCatMax"
                                                                style="color:black;text-align: center" title="Categoria Maxima: #{torneo.categoriaMaxima}" value="#{torneo.categoriaMaxima}"/>
                                                            <f:facet name="header">
                                                                <h:commandLink action="#{AdministracionTorneo.ordenarListaPorNombre}" id="categoriaMax"
                                                                    style="color:black" title="Categoria Maxima" value="Cat. Max."/>
                                                            </f:facet>
                                                        </h:column>
                                                        <h:column id="FechaInicio">
                                                            <!-- columna sin link para que muestre los datos formateados correctamente-->
                                                            <f:facet name="header">
                                                                <h:outputText id="colFechaInicio" title="Fecha de Inicio" value="Fecha Inicio"/>
                                                            </f:facet>
                                                            <h:outputText id="outputFechaInicio" title="Fecha Inicio: #{torneo.fechaInicio}" value="#{torneo.fechaInicio}">
                                                                <f:convertDateTime pattern="dd/MM/yyyy"/>
                                                            </h:outputText>
                                                        </h:column>
                                                        <h:column id="FechaLimite">
                                                            <!-- columna sin link para que muestre los datos formateados correctamente-->
                                                            <h:outputText id="outputFechaLimite" title="Fecha Limite: #{torneo.fechaLimiteInscripcion}" value="#{torneo.fechaLimiteInscripcion}">
                                                                <f:convertDateTime pattern="dd/MM/yyyy"/>
                                                            </h:outputText>
                                                            <f:facet name="header">
                                                                <h:outputText id="colFechaLimite" title="Fecha de Inscripcion" value="Fecha Inscrip"/>
                                                            </f:facet>
                                                        </h:column>
                                                        <f:facet name="footer">
                                                            <h:panelGroup>
                                                                <h:commandButton action="#{AdministracionTorneo.setPaginaPrimera}"
                                                                    disabled="#{AdministracionTorneo.tablaTorneos.first == 0}"
                                                                    image="/resources/pagination_first.gif" title="Inicio" value="Inicio"/>
                                                                <h:commandButton action="#{AdministracionTorneo.setPaginaAnterior}"
                                                                    disabled="#{AdministracionTorneo.tablaTorneos.first == 0}"
                                                                    image="/resources/pagination_prev.gif" title="Anterior" value="Anterior"/>
                                                                <h:outputText style="font-size: 12px;" value="Pág. #{AdministracionTorneo.paginaActual} de #{AdministracionTorneo.totalPaginas}"/>
                                                                <h:commandButton action="#{AdministracionTorneo.setPaginaSiguiente}"
                                                                    disabled="#{AdministracionTorneo.tablaTorneos.first + AdministracionTorneo.tablaTorneos.rows &gt;= AdministracionTorneo.tablaTorneos.rowCount}"
                                                                    image="/resources/pagination_next.gif" title="Siguiente" value="Siguiente"/>
                                                                <h:commandButton action="#{AdministracionTorneo.setPaginaUltima}"
                                                                    disabled="#{AdministracionTorneo.tablaTorneos.first + AdministracionTorneo.tablaTorneos.rows &gt;= AdministracionTorneo.tablaTorneos.rowCount}"
                                                                    image="/resources/pagination_last.gif" title="Ultimo" value="Ultimo"/>
                                                            </h:panelGroup>
                                                        </f:facet>
                                                    </h:dataTable>
                                                    <h:commandButton action="#{AdministracionTorneo.getSelectedItems}" id="btnSelecciones"
                                                        style="left: 528px; top: 64px; position: absolute; width: 100px" value="Torneos Seleccionados"/>
                                                    <ui:textField binding="#{AdministracionTorneo.tfBuscarNombre}" id="tfBuscarNombre" style="left: 72px; top: 24px; position: absolute; width: 128px"/>
                                                    <ui:label id="lblBuscar" style="left: 16px; top: 24px; position: absolute" text="Nombre"/>
                                                    <ui:button action="#{AdministracionTorneo.btnBuscar_action}" id="btnBuscar"
                                                        style="left: 327px; top: 24px; position: absolute; width: 72px" text="Buscar"/>
                                                    <ui:button action="#{AdministracionTorneo.btnTodos_action}" id="btnTodos"
                                                        style="left: 415px; top: 24px; position: absolute; width: 96px" text="Mostrar Todos"/>
                                                    <ui:textField binding="#{AdministracionTorneo.tfBuscarAño}" columns="4" id="tfBuscarAño" maxLength="4" style="left: 248px; top: 24px; position: absolute; width: 64px"/>
                                                    <ui:label id="lblAño" style="left: 216px; top: 24px; position: absolute" text="Año"/>
                                                </ui:panelLayout>
                                            </ui:tab>
                                            <ui:tab action="#{AdministracionTorneo.tabOperaciones_action}" id="tabOperaciones" text="Operaciones" toolTip="Operaciones">
                                                <ui:panelLayout id="layoutPanel2" style="background-color: rgb(153, 204, 255); height: 224px; width: 100%">
                                                    <ui:label id="lblAño" style="left: 56px; top: 48px; position: absolute" text="Año"/>
                                                    <ui:textField binding="#{AdministracionTorneo.tfAño}" columns="4" id="tfAño" maxLength="4"
                                                        style="left: 96px; top: 48px; position: absolute; width: 80px" tabIndex="2"/>
                                                    <ui:button action="#{AdministracionTorneo.btnModificar_action}" id="btnModificar"
                                                        style="left: 175px; top: 184px; position: absolute; width: 72px" tabIndex="8" text="Modificar"/>
                                                    <ui:button action="#{AdministracionTorneo.btnEliminar_action}" id="btnEliminar"
                                                        style="left: 255px; top: 184px; position: absolute; width: 72px" tabIndex="9" text="Eliminar"/>
                                                    <ui:button action="#{AdministracionTorneo.btnAgregar_action}" id="btnAgregar"
                                                        style="height: 20px; left: 95px; top: 184px; position: absolute; width: 72px" tabIndex="7" text="Agregar"/>
                                                    <ui:button action="#{AdministracionTorneo.btnCancelar_action}" id="btnCancelar"
                                                        style="left: 335px; top: 184px; position: absolute; width: 72px" text="Cancelar"/>
                                                    <ui:textField binding="#{AdministracionTorneo.tfCatMinima}" columns="4" id="tfCatMinima" maxLength="4"
                                                        style="left: 96px; top: 80px; position: absolute; width: 32px" tabIndex="3"/>
                                                    <ui:textField binding="#{AdministracionTorneo.tfCatMaxima}" columns="4" id="tfCatMaxima" maxLength="4"
                                                        style="left: 152px; top: 80px; position: absolute; width: 32px" tabIndex="4"/>
                                                    <ui:label id="label3" style="font-size: 14px; left: 146px; top: 80px; position: absolute; width: 8px" text="/"/>
                                                    <ui:label id="label4" style="left: 24px; top: 80px; position: absolute" text="Categoria"/>
                                                    <ui:label id="lblFechaInicio" style="left: 24px; top: 112px; position: absolute" text="Fecha Inicio"/>
                                                    <ui:calendar binding="#{AdministracionTorneo.cldFechaInicio}" columns="10"
                                                        dateFormatPatternHelp="Dia/Mes/Año" id="cldFechaInicio"
                                                        style="left: 96px; top: 112px; position: absolute" tabIndex="5" toolTip="Ingrese una fecha de inicio del torneo">
                                                        <f:convertDateTime pattern="dd/MM/yyyy"/>
                                                    </ui:calendar>
                                                    <ui:label id="lblFechaInscripcion" style="left: 216px; top: 112px; position: absolute" text="Fecha Limite de Inscripcion"/>
                                                    <ui:calendar binding="#{AdministracionTorneo.cldFechaLimiteInscrip}" columns="10"
                                                        dateFormatPatternHelp="Dia/Mes/Año" id="cldFechaLimiteInscrip"
                                                        style="left: 384px; top: 112px; position: absolute" tabIndex="6" toolTip="Ingrese una fecha limite para inscribirse"/>
                                                    <ui:label id="lblNombre" style="left: 40px; top: 16px; position: absolute" text="Nombre"/>
                                                    <ui:textField binding="#{AdministracionTorneo.tfNombre}" id="tfNombre"
                                                        style="left: 96px; top: 16px; position: absolute; width: 216px" tabIndex="1"/>
                                                    <ui:label binding="#{AdministracionTorneo.lblIdTorneo}" id="lblIdTorneo"
                                                        style="left: 328px; top: 16px; position: absolute" text="lblId" visible="true"/>
                                                    <ui:button action="#{AdministracionTorneo.btnLimpiar_action}" id="btnLimpiar"
                                                        style="left: 375px; top: 16px; position: absolute; width: 96px" text="Limpiar Datos"/>
                                                </ui:panelLayout>
                                            </ui:tab>
                                        </ui:tabSet>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <ui:image id="image1" url="/resources/open%202.jpg"/>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </ui:form>
                    <script type="text/javascript">
                        //FUNCIONES JQUERY
                        $(document).ready(function(){
                            /*Funcion focus que cambia el borde a todos los textfield*/

                            //$('input:not(:submit)').focus(function(){
                              // $(this).css("border","2px solid orange");
                            //});

                            /*
                            /*Funcion blur que vuelve a dejar los texfield como estaban luego de que pierden el foco*/
                            //$('input:not(:submit)').blur(function(){
                              // $(this).css("border","1px solid #848687");
                            //});

                            /*Funcion focus que cambia el borde a todos los textfield*/
                            $('input[type="text"]').focus(function(){
                               $(this).css("border","2px solid orange");
                            });
                            /*Funcion blur que vuelve a dejar los texfield como estaban luego de que pierden el foco*/
                            $('input[type="text"]').blur(function(){
                               $(this).css("border","1px solid #848687");
                            });

                            /* Funciones que ocultan la columna ID de la tabla torneos*/
                            
                            $('#form\\:tabSetTorneos\\:tabConsultar\\:tablaTorneos thead tr:eq(1) th:eq(2)').hide();//Oculto el encabezado de la columna ID
                            $('#form\\:tabSetTorneos\\:tabConsultar\\:tablaTorneos tbody tr').each(function(){
                                $(this).children('td:eq(2)').hide();//oculto el valor del id de cada fila
                            }
                            );

                            /*Funcion que pinta la fila al seleccionar con el checkbox */
                            //---identificacion antigua = $('#torneo tbody:eq(1) tr td input').click(function() {
                            $('#form\\:tabSetTorneos\\:tabConsultar\\:tablaTorneos tbody tr td input').click(function() {
                                var checked=$(this).attr("checked")
                                if (checked) {
                                    $(this).parent().parent().css("background","#66ccff");
                                    //$(this).parent().parent().addClass("highlight");
                                } else {
                                    $(this).parent().parent().css("background","");
                                    //$(this).parent().parent().removeClass("highlight");
                                }
                            });
                                                   
                            /* Funcion que pinta la fila al pasar con el mouse por encima*/

                            //---identificacion antigua = $('#torneo tbody:eq(1) tr').hover(
                            $('#form\\:tabSetTorneos\\:tabConsultar\\:tablaTorneos tbody tr').hover(
                            function () {
                                var checked=$(this).children('td').children('input').attr("checked")
                                if(!checked){
                                    $(this).css("background","#D3E0EB");
                                }

                                //$(this).css("cursor","pointer");
                            },
                            function () {
                                var checked=$(this).children('td').children('input').attr("checked")
                                if(!checked){
                                    $(this).css("background","");
                                    //$(this).css("cursor","");
                                }
                            }
                            );


                            /* Funcion que sirve para seleccionar una fila de la tabla.
                             * luego de modificar un torneo
                             * Por cada tr en tbody agrego o quito css background
                             * dependiendo si nombre eq(2).text() es el nombre del torneo modificado */

                            //---identificacion antigua = $('#torneo tbody:eq(1) tr').each(function(){
                            $('#form\\:tabSetTorneos\\:tabConsultar\\:tablaTorneos tbody tr').each(function(){
                                var idTorneoMod="${AdministracionTorneo.idTorneoModificado}"
                                var valorCeldaId=$(this).children('td:eq(2)').text()
                                if(valorCeldaId==idTorneoMod){
                                    $(this).css("background","#ccffff");
                                }else{
                                    var checked=$(this).children('td').children('input').attr("checked")
                                    if(checked){
                                        $(this).css("background","#66ccff");
                                    }else{
                                        $(this).css("background","");
                                    }                                    
                                }
                            }
                            );
                    

                            /* Funcion que sirve para alinear las celdas de la tabla.
                             * Alina el contenido (tbody)
                             * Por cada tr en tbody alinea el td segun el indice eq */

                            //---identificacion antigua = $('#torneo tbody:eq(1) tr').each(function(){
                            $('#form\\:tabSetTorneos\\:tabConsultar\\:tablaTorneos tbody tr').each(function(){
                                $(this).children('td:eq(3)').css('text-align', 'left'); //Nombre
                               
                            }
                            );


                            /**
                             * FUncion que sirve para mostrar un cuadro de confirmacion antes de eliminar un torneo
                             */
                                var confirmacion = false;

                                 $('#form\\:tabSetTorneos\\:tabOperaciones\\:btnEliminar').click( function(e) {
                                     if (confirmacion) { return true; }//Si acepto confirmo la eliminacion no muestr el jconfirm
                                     $.alerts.horizontalOffset=-75;
                                     $.alerts.okButton="Aceptar";
                                     $.alerts.cancelButton="Cancelar";

                                     var torneo="${AdministracionTorneo.tfNombre.text}"
                                     var clickedObj = $(this);//crea el mismo objeto para despues llamar a la funcion click
                                     jConfirm('¿Esta seguro que desea eliminar el torneo ' + torneo + '?', 'Confirmar eliminacion', function(r) {
                                        if (r){//si acepto
                                            //jAlert(r);
                                            //vuelve a llamarse a si mismo y ejecuta la eliminacion.
                                            confirmacion = true;
                                            clickedObj.click();
                                            confirmacion = false;
                                            }
                                        });
                                    return confirmacion;

                                 });

                         /* Funcion que cambia los encabezados de los dias de la semana en el calendario fechainicio */
                            $('#form\\:tabSetTorneos\\:tabOperaciones\\:cldFechaInicio\\:_datePicker .DatCalTbl tr:eq(0)').each(function(){
                                $(this).children('th:eq(0) span').text('L');
                                $(this).children('th:eq(1) span').text('M');
                                $(this).children('th:eq(2) span').text('M');
                                $(this).children('th:eq(3) span').text('J');
                                $(this).children('th:eq(4) span').text('V');
                                $(this).children('th:eq(5) span').text('S');
                                $(this).children('th:eq(6) span').text('D');

                            }
                            );

                             /* Funcion que cambia los encabezados de los dias de la semana en el calendario fechaLimiteInscripcion */
                            var cldFechaLimite
                            cldFechaLimite= $('#form\\:tabSetTorneos\\:tabOperaciones\\:cldFechaLimiteInscrip\\:_datePicker');
                            cldFechaLimite.find('th:eq(0) span').text('L');
                            cldFechaLimite.find('th:eq(1) span').text('M');
                            cldFechaLimite.find('th:eq(2) span').text('M');
                            cldFechaLimite.find('th:eq(3) span').text('J');
                            cldFechaLimite.find('th:eq(4) span').text('V');
                            cldFechaLimite.find('th:eq(5) span').text('S');
                            cldFechaLimite.find('th:eq(6) span').text('D');

                            // funciones que pasan a solo lectura el campo de texto de los calendarios
                            // obligando asi al usuario a clickear el boton y aparezca el calendario desplegable
                            // Luego cambia el color de fondo de los campos de texto a blanco.
                            /*
                            $('#form\\:tabSetTorneos\\:tabOperaciones\\:cldFechaInicio_field').attr("readOnly", "true");
                            $('#form\\:tabSetTorneos\\:tabOperaciones\\:cldFechaLimiteInscrip_field').attr("readOnly", "true");
                            $('#form\\:tabSetTorneos\\:tabOperaciones\\:cldFechaInicio_field').css("background","white");
                            $('#form\\:tabSetTorneos\\:tabOperaciones\\:cldFechaLimiteInscrip_field').css("background","white");
                            */
                          
                });
                    </script>
                </ui:body>
            </ui:html>
        </ui:page>
    </f:view>
</jsp:root>
